{% extends "base.html" %}

{% block body_attributes %} class="dataBrowser map"{% endblock %}

{% block content %}
	<h2>Data Browser - Map</h2>
	<div class="column region">
		<h3>Regions</h3>
		<div class="items"></div>
	</div>
	<div class="column constellation">
		<h3>Constellations</h3>
		<div class="items"></div>
	</div>
	<div class="column solarSystem">
		<h3>Solar Systems</h3>
		<div class="items"></div>
	</div>
	<div class="column moon">
		<h3>Moons</h3>
		<div class="items"></div>
	</div>
{% endblock %}

{% block tail_script %}
<script type="text/javascript">
$(document).ready(function()
{
	loadRegions();
	
	$('.region .items a').live('click',
		function(e)
		{
			$('.region .items a').removeClass('active');
			$(e.target).addClass('active');
			loadConstellations();
		});
	
	$('.constellation .items a').live('click',
		function(e)
		{
			$('.constellation .items a').removeClass('active');
			$(e.target).addClass('active');
			loadSolarSystems();
		});
	
	$('.solarSystem .items a').live('click',
		function(e)
		{
			$('.solarSystem .items a').removeClass('active');
			$(e.target).addClass('active');
			loadMoons();
		});
});

function loadRegions()
{
	$.getJSON('/ajax/map/region',
		function(data)
		{
			if( data.length > 0 )
			{
				$('.region .items').empty();
				for( var i = 0; i < data.length; i++ )
				{
					var region = data[i];
					$('.region .items').append('<a href="#' + region.key + '">' + region.name + '</a>');
				}
			}
		});
}

function loadConstellations()
{
	$.getJSON('/ajax/map/constellation',
		{
			'region': $('.region .items a.active').attr('href').replace('#', '')
		},
		function(data)
		{
			if( data.length > 0 )
			{
				$('.constellation .items').empty();
				for( var i = 0; i < data.length; i++ )
				{
					var constellation = data[i];
					$('.constellation .items').append('<a href="#' + constellation.key + '">' + constellation.name + '</a>');
				}
			}
		});
}

function loadSolarSystems()
{
	$.getJSON('/ajax/map/solarSystem',
		{
			'constellation': $('.constellation .items a.active').attr('href').replace('#', '')
		},
		function(data)
		{
			if( data.length > 0 )
			{
				$('.solarSystem .items').empty();
				for( var i = 0; i < data.length; i++ )
				{
					var solarSystem = data[i];
					$('.solarSystem .items').append('<a href="#' + solarSystem.key + '">' + solarSystem.name + '</a>');
				}
			}
		});
}

function loadMoons()
{
	$.getJSON('/ajax/map/moon',
		{
			'solarSystem': $('.solarSystem .items a.active').attr('href').replace('#', '')
		},
		function(data)
		{
			if( data.length > 0 )
			{
				$('.moon .items').empty();
				for( var i = 0; i < data.length; i++ )
				{
					var moon = data[i];
					$('.moon .items').append('<a href="#' + moon.key + '">' + moon.name + '</a>');
				}
			}
		});
}
</script>
{% endblock %}